<template>
  <view class="container">
    <view class="box">
      <view class="title">对公转账信息</view>
      <view class="text">收款单位名称: {{ orzInfo.company_name }}</view>
      <view class="text">收款单位账号: {{ orzInfo.company_account }}</view>
      <view class="text">收款单位开户银行名称: {{ orzInfo.company_bank }}</view>
    </view>
    <view class="box">
      <view class="title">对公转账信息</view>
      <view class="upload_wrapper" @click="chooseImg">
        <image class="upload_image" mode="widthFix" :src="img || defaultBg" />
      </view>
    </view>
    <view class="btn" @click="submit">提交</view>
  </view>
</template>
<script>
import { upload } from "@/utils/request.js";
import { accountInfo, uploadPay } from '@/api/hire.js';

const defaultBg = 'https://taxi.raxan.xyz/wechat/static/images/hire_upload_201112.png'

export default {
  data() {
    return {
      id: '',
      img: '',
      defaultBg,
      orzInfo: {}
    }
  },
  onLoad(options) {
    this.id = options.order_id;
    this.getAccountInfo();
  },
  methods: {
    submit() {
      if (this.uploading) return;
      this.uploading = true;
      if (!this.img) return uni.showToast({ title: '请选择图片', icon: "none" });
      uploadPay({
        id: this.id,
        img: this.img
      }).then(() => {
        uni.showToast({ title: '上传成功等待审核' });
        uni.switchTab({
          url: '/pages/hire/index'
        });
      }).finally(() => {
        this.uploading = false;
      })
    },
    getAccountInfo() {
      accountInfo().then(res => {
        this.orzInfo = res.data;
      })
    },
    chooseImg() {
      if (this.uploading) return;
      this.uploading = true;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: (res) => {
          upload(res.tempFilePaths[0]).then((res) => {
            this.img = res?.data?.url;
          }).finally(() => {
            this.uploading = false;
          })
        },
        fail: (err) => {
          this.uploading = false;
          console.log(err)
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  padding: 32rpx;
}
.box {
  background-color: #FFFFFF;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #111E36;
  line-height: 38rpx;
  margin-bottom: 24rpx;
}

.text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #111E36;
  line-height: 33rpx;
  text-align: left;
  margin-bottom: 24rpx;
}

.upload_wrapper {
  padding: 24rpx 48rpx 0 48rpx;
  .upload_image {
    width: 100%;
  }
}

.btn {
    line-height: 96rpx;
    color: #F8F9FC;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    background-color: #008DFF;
    border-radius: 12rpx;
    position: fixed;
    left: 32rpx;
    right: 32rpx;
    bottom: 8rpx;
    z-index: 10;
  }
</style>